import React,{Component} from 'react';
import { Row,Col } from 'antd';
import './index.less'
import axios from '../../axios'
import moment from 'moment';
// import Util from '../../util/util'
export default class Header extends Component{
    constructor(props){
        super(props);
        this.state={userName:'',weather:''}
    }
    componentDidMount(){
        //存入用户名
        this.setState({
            userName:'admin',
        })
        //存入当前时间
        this.newTime=setInterval(()=>{
           let sysTime =moment().format('YYYY-MM-DD HH:mm:ss')
           this.setState({sysTime})
        },1000)
        //获取实时定位和天气
        this.getpositionAPIData()
    }
    componentWillUnmount(){
        clearInterval(this.newTime)
    }

    //获取当前定位api
    getpositionAPIData(){
        const that=this;
        axios.jsonp({
            url:'https://restapi.amap.com/v3/ip?key=ecc4555c943b90f1f4e112aa502a4fb8'
        }).then((res)=>{
            that.getWeatherAPIData(res.adcode)
        })  
    }

    // 获取天气api
    getWeatherAPIData(city){
        const that=this;
            axios.jsonp({
                url:`https://restapi.amap.com/v3/weather/weatherInfo?key=ecc4555c943b90f1f4e112aa502a4fb8&city=${city}`, 
            }).then((res)=>{
                if(res.status==='1'){
                    that.setState({
                        weather:`${res.lives[0].city}：${res.lives[0].temperature}℃  ${res.lives[0].weather}  ${res.lives[0].winddirection}风  ${res.lives[0].windpower}级`
                    })
                }
            }).catch((err)=>{
    
            })
    }

    render(){
        return(
            <div className="header">
                <Row className="header-top">
                    <Col span="24">
                        <span>欢迎，{this.state.userName}</span>
                        <a href="#">退出</a>
                    </Col>
                </Row>
                <Row className="breadcrump">
                    <Col span="4" className="breadcrump-title">
                       首页
                    </Col>
                    <Col span="20" className="weather">
                       <span className="date">{this.state.sysTime}</span>
                       <span className="weather-detail">{this.state.weather}</span>
                    </Col>
                </Row>
            </div>
        )
    }

}

